<template>
  <el-dialog :visible.sync="loginFlag" :width="isMobile" custom-class="Dialog">
    <div class="login">
      <div class="box">
        <p class="table">Login</p>
        <br />
        <input type="text" placeholder="账号" v-model="form.username" />
        <span></span>
        <input type="password" placeholder="密码" v-model="form.password" />
        <span></span>
        <br />

        <a href="#" class="go" @click="userlogin">GO</a>
        <div class="msg">
          Don't have account?
          <a href="#" @click="registerUser">Sign up</a>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { login } from "@/request/api";
export default {
  name: "",
  components: {},
  props: [""],
  inject: ["reload"],
  computed: {
    loginFlag: {
      set(value) {
        this.$store.state.loginFlag = value;
      },
      get() {
        return this.$store.state.loginFlag;
      },
    },
    isMobile() {
      const clientWidth = document.documentElement.clientWidth;
      if (clientWidth > 960) {
        return "40%";
      }
      return "72%";
    },
  },
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      local: {
        login_province: "",
        login_city: "",
      },
    };
  },
  created() {
    this.getLocalCity();
  },
  mounted() {},
  methods: {
    async userlogin() {
      if (this.form.username == "" || this.form.password == "") {
        this.$message({
          message: "用户名或密码不能为空",
          type: "error",
          offset: 80,
        });
        return;
      }
      let local = await this.getLocalCity();
      this.local.login_province = local.ad_info.province;
      this.local.login_city = local.ad_info.city;
      const loginParams = { ...this.local, ...this.form };
      const { data: res } = await login(loginParams);
      if (res.status !== 200) {
        return this.$message({
          message: "用户名或密码错误",
          type: "error",
          offset: 80,
        });
      }
      this.$message({ message: "登录成功", type: "success", offset: 80 });
      this.form.username = "";
      this.form.password = "";
      window.sessionStorage.setItem("token", JSON.stringify(res.token));
      window.sessionStorage.setItem("user", JSON.stringify(res.data));
      this.$store.commit("getUserInfo");
      this.$store.state.loginFlag = false;
    },

    registerUser() {
      this.$store.state.loginFlag = false;
      this.$store.state.registerFlag = true;
    },
    async getLocalCity() {
      let data = {
        key: "EMPBZ-HX264-WGLUH-DNMCL-AQSM6-P2FNY",
        output: "jsonp",
      };
      let url = "https://apis.map.qq.com/ws/location/v1/ip";
      // console.log(this.$jsonp(url, data))
      const { result: res } = await this.$jsonp(url, data);
      return res;
    },
  },
};
</script>
<style lang='less' scoped>
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  // background-image: url("../assets/image/r.jpg");
  background-size: cover;
}

.login {
  width: 550px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.4)
  );
  /* 使背景模糊化 */
  backdrop-filter: blur(10px);
  //   box-shadow: 0 0 20px #a29bfe;
  //   border-radius: 15px;
}

.table {
  font-weight: 900;
  font-size: 40px;
  text-align: center;
  letter-spacing: 5px;
  color: #3d3d3d;
}

.box {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.box input {
  width: 400px;
  height: 100%;
  margin-bottom: 20px;
  outline: none;
  border: 0;
  padding: 10px;
  background-color: transparent;
  border-bottom: 3px solid rgb(150, 150, 240);
  font: 900 16px "";
}
.box span {
  position: absolute;
  left: 790px;
  line-height: 120px;
}
.msg {
  text-align: center;
  line-height: 88px;
  font-size: 14px;
  a {
    text-decoration-line: none;
    color: #abc1ee;
  }
}

.go {
  text-align: center;
  display: block;
  height: 24px;
  padding: 12px;
  font: 900 20px "";
  border-radius: 10px;
  margin-top: 20px;
  color: #fff;
  letter-spacing: 3px;
  background-image: linear-gradient(to left, #fd79a8, #a29bf6);
}
@media only screen and (max-width: 992px) {
  .box {
    padding: 15px;
  }
  .box input {
    width: 230px;
  }
}
</style>